<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		    let messages = []
			function fun(){
				let username = document.getElementById("username").value
				let message = document.getElementById("board").value
				//let temp = "["+username+"]说："+message  //字符串拼接
				//变量在中间
				//JS 模板字符串
				let temp = `[${username}]说:${message}`
				messages.unshift(temp)
				if(messages.length>10){
			       messages.pop()
				}
				document.getElementById("messageBoard").value = messages.join("\n")
			}
			
		</script>
	</head>
	<body>
		<form>
			姓名：<input type="text" id="username"/> <br>
			留言：<textarea rows="3" cols="30" id="board" style="resize: none; vertical-align: top;"></textarea><br>
			<input type="reset"  value="重置" />
			<input type="button" onclick="fun()" value="留言" />
		</form>
		<hr >
		<textarea rows="10" cols="50" id="messageBoard" style="resize: none;"></textarea>
	</body>
</html>
